<template>
  <div :id="chartOpt.id" :ref="chartOpt.id" class="echartsCon"></div>
</template>

<script>
let resizeArr = []

export default {
  name: 'echartConent',
  props: {
    chartOpt: {
      type: Object,
      default: ()=>{
        return {
          id: '',
          theme: '', // 图表主题
          opts: {
            // 图表附加参数
            // devicePixelRatio?: number,  // 设备像素比，默认取浏览器的值window.devicePixelRatio
            renderer: 'svg',   // 渲染器，支持 'canvas' 或者 'svg'
            // width?: number|string,  // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度
            // height?: number|string,   // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度
            // locale?: string   // 使用的语言，内置 'ZH' 和 'EN' 两个语言，也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n
          },
          options: {}
        }
      },
      require: true
    },
    istrigger: false
  },
  watch: {
    istrigger() {
      this[this.chartOpt.id].clear()
      this[this.chartOpt.id].setOption(this.chartOpt.options)
      this.$emit('mychartEvent', this[this.chartOpt.id])
    }
  },
  mounted() {
    setTimeout(() => {
      this.initEcharts(this.chartOpt.id, this.chartOpt.options || {})
    }, 100)
  },
  methods: {
    // 初始化echarts
    initEcharts(id, option) {
      if(!this.$refs[id]) return;
      this[id] = this.$echarts.init(this.$refs[id], this.chartOpt.theme, this.chartOpt.opts)
      this[id].setOption(option)
      // mychart 暴露mychart
      this.$emit('getMychart', this[id])
      resizeArr.push(this[id].resize)
      this.$store.commit('echarts/MuresizeArr', resizeArr)
      window.onresize = e => {
        // foreach(resizeArr, item => {
        //   item()
        // })
        resizeArr.forEach(item=>{
          item()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.echartsCon {
  // width: 100%;
  height: 100%;
  // min-width: 60px;
  min-height: 60px;
  flex: 1;
  position: relative;
}
</style>
